<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRM客户档案管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .header p {
            opacity: 0.9;
            font-size: 16px;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 20px;
        }

        .customer-list {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            height: fit-content;
        }

        .customer-form {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 5px;
        }

        .search-box {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .customer-item {
            padding: 12px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .customer-item:hover {
            background-color: #f8f9ff;
            border-color: #667eea;
            transform: translateY(-1px);
        }

        .customer-item.active {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
        }

        .customer-name {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .customer-info {
            font-size: 12px;
            opacity: 0.8;
        }

        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            margin-left: 5px;
        }

        .status-valid { background-color: #4CAF50; color: white; }
        .status-potential { background-color: #2196F3; color: white; }
        .status-invalid { background-color: #9E9E9E; color: white; }
        .status-completed { background-color: #FF9800; color: white; }
        .status-blacklist { background-color: #F44336; color: white; }

        .health-good { color: #4CAF50; }
        .health-fair { color: #FFC107; }
        .health-poor { color: #FF9800; }
        .health-bad { color: #F44336; }

        .form-section {
            margin-bottom: 25px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
            background-color: #fafafa;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }

        .required {
            color: #F44336;
        }

        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }

        .tag {
            background-color: #667eea;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .tag .remove {
            cursor: pointer;
            font-weight: bold;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background-color: #5a6fd8;
            transform: translateY(-1px);
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            justify-content: center;
        }

        .add-customer-btn {
            width: 100%;
            margin-bottom: 15px;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .checkbox-group {
                grid-template-columns: 1fr;
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🏢 CRM客户档案管理系统</h1>
            <p>中老年旅游客户全方位信息管理平台</p>
        </div>

        <div class="main-content">
            <!-- 客户列表 -->
            <div class="customer-list">
                <div class="section-title">客户列表</div>
                <button class="btn btn-primary add-customer-btn" onclick="addNewCustomer()">+ 新增客户</button>
                <input type="text" class="search-box" placeholder="搜索客户姓名、电话..." onkeyup="searchCustomers(this.value)">
                
                <div id="customerList">
                    <div class="customer-item active" onclick="selectCustomer(this, 'CRM2024001')">
                        <div class="customer-name">
                            张阿姨
                            <span class="status-badge status-valid">有效客户</span>
                        </div>
                        <div class="customer-info">
                            65岁 | 138****5678 | <span class="health-good">健康良好</span>
                        </div>
                    </div>
                    
                    <div class="customer-item" onclick="selectCustomer(this, 'CRM2024002')">
                        <div class="customer-name">
                            李大爷
                            <span class="status-badge status-potential">潜在客户</span>
                        </div>
                        <div class="customer-info">
                            68岁 | 139****1234 | <span class="health-fair">健康一般</span>
                        </div>
                    </div>
                    
                    <div class="customer-item" onclick="selectCustomer(this, 'CRM2024003')">
                        <div class="customer-name">
                            王阿姨
                            <span class="status-badge status-completed">已成交客户</span>
                        </div>
                        <div class="customer-info">
                            62岁 | 137****9876 | <span class="health-good">健康良好</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 客户详情表单 -->
            <div class="customer-form fade-in">
                <div class="section-title">客户档案详情</div>
                
                <form id="customerForm">
                    <!-- 基础信息模块 -->
                    <div class="form-section">
                        <h3>📋 基础信息</h3>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>客户编号</label>
                                <input type="text" id="customerCode" value="CRM2024001" readonly style="background-color: #f0f0f0;">
                            </div>
                            <div class="form-group">
                                <label>客户姓名 <span class="required">*</span></label>
                                <input type="text" id="customerName" value="张阿姨" required>
                            </div>
                            <div class="form-group">
                                <label>性别 <span class="required">*</span></label>
                                <select id="gender" required>
                                    <option value="">请选择</option>
                                    <option value="女" selected>女</option>
                                    <option value="男">男</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>出生日期 <span class="required">*</span></label>
                                <input type="date" id="birthDate" value="1959-03-15" required>
                            </div>
                            <div class="form-group">
                                <label>实际年龄</label>
                                <input type="text" id="age" value="65岁" readonly style="background-color: #f0f0f0;">
                            </div>
                            <div class="form-group">
                                <label>身份证号 <span class="required">*</span></label>
                                <input type="text" id="idCard" value="110101195903150028" required>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>主要手机 <span class="required">*</span></label>
                                <input type="tel" id="mainPhone" value="13812345678" required>
                            </div>
                            <div class="form-group">
                                <label>备用手机</label>
                                <input type="tel" id="backupPhone" value="15987654321">
                            </div>
                            <div class="form-group">
                                <label>微信号</label>
                                <input type="text" id="wechat" value="zhang_ayi_2024">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>客户状态 <span class="required">*</span></label>
                                <select id="customerStatus" required>
                                    <option value="有效客户" selected>有效客户</option>
                                    <option value="潜在客户">潜在客户</option>
                                    <option value="无效客户">无效客户</option>
                                    <option value="已成交客户">已成交客户</option>
                                    <option value="黑名单">黑名单</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>工作状态</label>
                                <select id="workStatus">
                                    <option value="退休" selected>退休</option>
                                    <option value="在职">在职</option>
                                    <option value="待业">待业</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>职业信息</label>
                                <input type="text" id="occupation" value="退休教师">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>客户标签</label>
                            <div class="tag-container" id="customerTags">
                                <div class="tag">VIP客户 <span class="remove" onclick="removeTag(this)">×</span></div>
                                <div class="tag">易沟通 <span class="remove" onclick="removeTag(this)">×</span></div>
                                <div class="tag">喜欢跟团 <span class="remove" onclick="removeTag(this)">×</span></div>
                            </div>
                            <input type="text" placeholder="输入标签后按回车添加" onkeypress="addTag(event)">
                        </div>
                    </div>

                    <!-- 旅游偏好档案 -->
                    <div class="form-section">
                        <h3>✈️ 旅游偏好档案</h3>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>预算范围</label>
                                <select id="budgetRange">
                                    <option value="">请选择</option>
                                    <option value="经济型">经济型 (3000元以下)</option>
                                    <option value="舒适型" selected>舒适型 (3000-8000元)</option>
                                    <option value="品质型">品质型 (8000-15000元)</option>
                                    <option value="豪华型">豪华型 (15000元以上)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>支付偏好</label>
                                <select id="paymentPreference">
                                    <option value="">请选择</option>
                                    <option value="现金支付">现金支付</option>
                                    <option value="银行转账" selected>银行转账</option>
                                    <option value="微信支付">微信支付</option>
                                    <option value="支付宝">支付宝</option>
                                    <option value="刷卡">刷卡</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>出行天数偏好</label>
                                <select id="tripDuration">
                                    <option value="">请选择</option>
                                    <option value="短途">短途 (1-3天)</option>
                                    <option value="中途" selected>中途 (4-7天)</option>
                                    <option value="长途">长途 (8-15天)</option>
                                    <option value="超长">超长 (15天以上)</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>地域偏好</label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="region1" checked>
                                    <label for="region1">华东</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="region2" checked>
                                    <label for="region2">华南</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="region3">
                                    <label for="region3">西南</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="region4">
                                    <label for="region4">东南亚</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>景观偏好</label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="scenery1" checked>
                                    <label for="scenery1">山水风景</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="scenery2">
                                    <label for="scenery2">海滨度假</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="scenery3" checked>
                                    <label for="scenery3">历史古迹</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="scenery4">
                                    <label for="scenery4">温泉养生</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 健康状况记录 -->
                    <div class="form-section">
                        <h3>🏥 健康状况记录</h3>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>健康状况 <span class="required">*</span></label>
                                <select id="healthStatus" required>
                                    <option value="">请选择</option>
                                    <option value="健康良好" selected>健康良好</option>
                                    <option value="健康一般">健康一般</option>
                                    <option value="健康较差">健康较差</option>
                                    <option value="健康很差">健康很差</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>行动能力 <span class="required">*</span></label>
                                <select id="mobilityStatus" required>
                                    <option value="">请选择</option>
                                    <option value="行动自如" selected>行动自如</option>
                                    <option value="轻微受限">轻微受限</option>
                                    <option value="需要辅助">需要辅助</option>
                                    <option value="轮椅出行">轮椅出行</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>慢性疾病</label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="disease1">
                                    <label for="disease1">高血压</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="disease2">
                                    <label for="disease2">糖尿病</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="disease3">
                                    <label for="disease3">心脏病</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="disease4">
                                    <label for="disease4">关节炎</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>用药情况</label>
                                <textarea id="medication" rows="3" placeholder="请详细记录常用药品名称、服药时间和剂量..."></textarea>
                            </div>
                            <div class="form-group">
                                <label>饮食限制</label>
                                <select id="dietRestriction">
                                    <option value="">请选择</option>
                                    <option value="无特殊要求" selected>无特殊要求</option>
                                    <option value="清淡饮食">清淡饮食</option>
                                    <option value="低盐低脂">低盐低脂</option>
                                    <option value="糖尿病餐">糖尿病餐</option>
                                    <option value="素食">素食</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- 家庭社交信息 -->
                    <div class="form-section">
                        <h3>👨‍👩‍👧‍👦 家庭社交信息</h3>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>婚姻状况</label>
                                <select id="maritalStatus">
                                    <option value="">请选择</option>
                                    <option value="已婚" selected>已婚</option>
                                    <option value="丧偶">丧偶</option>
                                    <option value="离异">离异</option>
                                    <option value="未婚">未婚</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>配偶姓名</label>
                                <input type="text" id="spouseName" value="张大爷">
                            </div>
                            <div class="form-group">
                                <label>配偶电话</label>
                                <input type="tel" id="spousePhone" value="13987654321">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>紧急联系人姓名 <span class="required">*</span></label>
                                <input type="text" id="emergencyContact" value="张小明" required>
                            </div>
                            <div class="form-group">
                                <label>紧急联系人关系 <span class="required">*</span></label>
                                <select id="emergencyRelation" required>
                                    <option value="">请选择</option>
                                    <option value="配偶">配偶</option>
                                    <option value="子女" selected>子女</option>
                                    <option value="亲属">亲属</option>
                                    <option value="朋友">朋友</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>紧急联系人电话 <span class="required">*</span></label>
                                <input type="tel" id="emergencyPhone" value="13611112222" required>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>决策特点</label>
                                <select id="decisionStyle">
                                    <option value="">请选择</option>
                                    <option value="自主决策">自主决策</option>
                                    <option value="咨询决策" selected>咨询决策</option>
                                    <option value="共同决策">共同决策</option>
                                    <option value="代为决策">代为决策</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-success" onclick="saveCustomer()">💾 保存客户信息</button>
                        <button type="button" class="btn btn-secondary" onclick="resetForm()">🔄 重置表单</button>
                        <button type="button" class="btn btn-primary" onclick="exportCustomer()">📤 导出客户档案</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 客户数据模拟
        const customers = {
            'CRM2024001': {
                customerCode: 'CRM2024001',
                customerName: '张阿姨',
                gender: '女',
                birthDate: '1959-03-15',
                age: '65岁',
                idCard: '110101195903150028',
                mainPhone: '13812345678',
                backupPhone: '15987654321',
                wechat: 'zhang_ayi_2024',
                customerStatus: '有效客户',
                workStatus: '退休',
                occupation: '退休教师',
                budgetRange: '舒适型',
                paymentPreference: '银行转账',
                tripDuration: '中途',
                healthStatus: '健康良好',
                mobilityStatus: '行动自如',
                maritalStatus: '已婚',
                spouseName: '张大爷',
                spousePhone: '13987654321',
                emergencyContact: '张小明',
                emergencyRelation: '子女',
                emergencyPhone: '13611112222',
                decisionStyle: '咨询决策'
            },
            'CRM2024002': {
                customerCode: 'CRM2024002',
                customerName: '李大爷',
                gender: '男',
                birthDate: '1956-08-20',
                age: '68岁',
                idCard: '110101195608200015',
                mainPhone: '13912341234',
                customerStatus: '潜在客户',
                workStatus: '退休',
                healthStatus: '健康一般',
                mobilityStatus: '轻微受限'
            }
        };

        // 选择客户
        function selectCustomer(element, customerId) {
            // 移除其他客户的active状态
            document.querySelectorAll('.customer-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 添加当前客户的active状态
            element.classList.add('active');
            
            // 加载客户数据
            loadCustomerData(customerId);
        }

        // 加载客户数据到表单
        function loadCustomerData(customerId) {
            const customer = customers[customerId];
            if (!customer) return;

            // 填充表单数据
            Object.keys(customer).forEach(key => {
                const element = document.getElementById(key);
                if (element) {
                    element.value = customer[key];
                }
            });

            // 添加淡入动画
            const form = document.querySelector('.customer-form');
            form.classList.remove('fade-in');
            setTimeout(() => form.classList.add('fade-in'), 10);
        }

        // 搜索客户
        function searchCustomers(searchTerm) {
            const customerItems = document.querySelectorAll('.customer-item');
            customerItems.forEach(item => {
                const customerName = item.querySelector('.customer-name').textContent;
                const customerInfo = item.querySelector('.customer-info').textContent;
                
                if (customerName.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    customerInfo.toLowerCase().includes(searchTerm.toLowerCase())) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        // 添加标签
        function addTag(event) {
            if (event.key === 'Enter' && event.target.value.trim()) {
                const tagContainer = document.getElementById('customerTags');
                const tagText = event.target.value.trim();
                
                const tagElement = document.createElement('div');
                tagElement.className = 'tag';
                tagElement.innerHTML = `${tagText} <span class="remove" onclick="removeTag(this)">×</span>`;
                
                tagContainer.appendChild(tagElement);
                event.target.value = '';
            }
        }

        // 移除标签
        function removeTag(element) {
            element.parentElement.remove();
        }

        // 新增客户
        function addNewCustomer() {
            // 生成新的客户编号
            const newId = 'CRM2024' + String(Object.keys(customers).length + 1).padStart(3, '0');
            
            // 清空表单
            document.getElementById('customerForm').reset();
            document.getElementById('customerCode').value = newId;
            
            // 清空标签
            document.getElementById('customerTags').innerHTML = '';
            
            alert('已创建新客户档案，请填写客户信息');
        }

        // 保存客户
        function saveCustomer() {
            const form = document.getElementById('customerForm');
            const formData = new FormData(form);
            
            // 简单的表单验证
            const requiredFields = form.querySelectorAll('[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.style.borderColor = '#F44336';
                    isValid = false;
                } else {
                    field.style.borderColor = '#ddd';
                }
            });
            
            if (isValid) {
                alert('客户信息保存成功！');
                // 这里可以添加实际的保存逻辑
            } else {
                alert('请填写所有必填字段！');
            }
        }

        // 重置表单
        function resetForm() {
            if (confirm('确定要重置表单吗？所有未保存的修改将丢失。')) {
                document.getElementById('customerForm').reset();
                document.getElementById('customerTags').innerHTML = '';
            }
        }

        // 导出客户档案
        function exportCustomer() {
            const customerName = document.getElementById('customerName').value || '客户';
            alert(`正在导出 ${customerName} 的客户档案...`);
            // 这里可以添加实际的导出逻辑
        }

        // 根据出生日期自动计算年龄
        document.getElementById('birthDate').addEventListener('change', function() {
            const birthDate = new Date(this.value);
            const today = new Date();
            const age = today.getFullYear() - birthDate.getFullYear();
            document.getElementById('age').value = age + '岁';
        });

        // 身份证号校验
        document.getElementById('idCard').addEventListener('blur', function() {
            const idCard = this.value;
            if (idCard.length === 18) {
                // 简单的身份证号校验
                const birthYear = idCard.substring(6, 10);
                const birthMonth = idCard.substring(10, 12);
                const birthDay = idCard.substring(12, 14);
                
                document.getElementById('birthDate').value = `${birthYear}-${birthMonth}-${birthDay}`;
                
                const age = new Date().getFullYear() - parseInt(birthYear);
                document.getElementById('age').value = age + '岁';
            }
        });

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 默认加载第一个客户的数据
            loadCustomerData('CRM2024001');
        });
    </script>
</body>
</html>